<template>
    <div class="home-container">
        <el-tabs v-model="activeName" class="demo-tabs">
            <el-tab-pane style="height: 100%;" label="All" name="first">
                <HomeAll />
            </el-tab-pane>
            <el-tab-pane style="height: 100%;" label="Streaming" name="second">
                <HomeStreaming />
            </el-tab-pane>
            <el-tab-pane style="height: 100%;" label="Favourites" name="third">
                <HomeFavourites />
            </el-tab-pane>
        </el-tabs>
        <div class="home-connection-status">
            <div v-if="earthImg" class="background-img-earth"
                style="width: 100%;height: 100%;position: absolute;left: 0;top: 0;">
            </div>
            <div v-else class="change-background-earth" style="width: 100%;height: 100%;position: absolute;left: 0;top: 0;">
            </div>
            <div class="home-connection-mian">
                <div :class="animationSwitch">
                    <div :class="animationSwitchChild">
                    </div>
                </div>
                <div style="display: flex;flex-direction: column;" class="home-connection-switch-img">
                    <img @click="clickConnection" :src="getAssetsImg(switchIcon)" alt="">
                    <p style="color: #fff;">{{ timer }}</p>
                </div>
            </div>
            <home-foot class="home-foot" />
        </div>
    </div>
</template>

<script setup>
import { ref, reactive, onMounted, onBeforeUnmount } from 'vue'
import { info } from '../../apis/user.js'
import { vpnList } from '../../apis/vpn.js'
import { transferTime } from '../../utils/time.js'


const activeName = ref('first')
const animationSwitch = ref('home-connection-switch')
const animationSwitchChild = ref('home-connection-switch-child')
const earthImg = ref(true)
const switchIcon = ref('启动 1 (1).png')
const timer = ref('00:00:00')
const time = ref(0)
let timerStap = ref()
// const homeAllData = ref()



// 点击开关动效展示
const clickConnection = () => {
    timerStap.value = setInterval(() => {
        console.log(1111111);
        time.value++
        timer.value = transferTime(time.value)
    }, 1000);
    animationSwitch.value = 'change-connection-switch'
    animationSwitchChild.value = 'change-connection-switch-child'
    earthImg.value = false
    switchIcon.value = '启动 1.png'
}
const getAssetsImg = (name) => {
    return new URL(`/src/assets/imgs/icon/${name}`, import.meta.url).href
}
onMounted(async () => {
    let res = await info()
    let resVpnList = await vpnList()
    // console.log(homeAllData.value);
    console.log(res, "resHome!!!!!!!!!");
    console.log(resVpnList, 'resVpnList____________');
})
onBeforeUnmount(() => {
    console.log(11111111111111);
    clearInterval(timerStap.value)
    timerStap.value = ""
})
</script>

<style lang="scss" scoped>
@keyframes connection-status {
    from {
        transform: rotate(0);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes opacity-earth {

    // 两秒
    0% {
        opacity: 0;
    }

    25% {
        opacity: 0.6;
    }

    50% {
        opacity: 0.2;
    }

    75% {
        opacity: 0.6;
    }

    100% {
        opacity: 0;
    }
}

.demo-tabs {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

.change-connection-switch {
    width: 180px;
    height: 180px;
    background: linear-gradient(rgb(4, 74, 253), #9C7DEF, #fff);
    background-color: rgb(77, 124, 245);
    padding: 15px;
    border-radius: 50%;
    transform: rotate(-45deg);
    animation: connection-status 8s linear 0s infinite;
    position: relative;
    z-index: 1;
}

.change-connection-switch-child {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #220863 74.32%;
    display: flex;
    cursor: pointer;
    z-index: 10;
}

.home-container {
    display: flex;
    flex-direction: row;
    height: 100%;
    justify-content: center;

    .home-connection-status {
        display: flex;
        flex-direction: column;
        position: relative;


        .home-connection-mian {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;

            .home-connection-switch {
                width: 180px;
                height: 180px;
                background-color: #D891A1;
                background: linear-gradient(0deg, rgb(210, 199, 210), rgba(216, 145, 161, 1) 100%);
                padding: 15px;
                // opacity: .1;
                border-radius: 50%;
                transform: rotate(45deg);
                // animation: connection-status 3s linear 0s infinite;
                position: relative;



                .home-connection-switch-child {
                    width: 100%;
                    height: 100%;
                    border-radius: 50%;
                    background: #220863 74.32%;
                    display: flex;
                    cursor: pointer;
                    z-index: 10;
                }
            }

            .home-connection-switch-img {
                position: absolute;
                left: auto;
                top: auto;
                z-index: 5;
            }

        }
    }
}

.home-connection-status {
    background: linear-gradient(180deg, rgba(24, 15, 51, 02), rgba(34, 8, 99, .7)) !important;
    width: 50%;
    position: relative;
    height: 100%;
}

.home-foot {
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 100;
}

:deep(.el-tabs__item) {
    color: #fff;
}

.demo-tabs {
    width: 50%;
    display: flex;
    justify-content: center;
    padding: 20px;
}

:deep(.el-tabs__nav-wrap)::after {
    height: 2px;
    background-color: #837a7a;
}

:deep(.el-tabs__header) {
    width: 100%;

}

:deep(.el-tabs__nav) {
    width: 100%;
    justify-content: space-around;
}

.background-img-earth {
    background-image: url('../../assets/imgs/images/2c61154076983fca6ccddc28698dc24.png');
    background-repeat: no-repeat;
    background-size: 500px;
    background-position: -40px 380px;
}

.change-background-earth {
    background-image: url('../../assets/imgs/images/b571a5e445d8cb9b33f5e4004d634f3.png');
    animation: opacity-earth 8s linear 0s infinite;
    background-repeat: no-repeat;
    background-size: 500px;
    background-position: -40px 380px;

}

:deep(.el-tabs__content) {
    flex: 1;
}
</style>